<template>
    <div class="container ">
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="in base">
					<div class="title">数据总览</div>
					<!-- <div class="cot">
                        <div class="v1">
                            <div class="txt">本周新增企业</div>
                            <div class="num">{{baseData.add_company_num}}</div>
                        </div>
                        <div class="v1">
                            <div class="txt">企业总数</div>
                            <div class="num">{{baseData.company_num}}</div>
                        </div>
                        <div class="v1">
                            <div class="txt">过期企业</div>
                            <div class="num">{{baseData.expired_company_num}}</div>
                        </div>
                        <div class="v1">
                            <div class="txt">即将过期企业数</div>
                            <div class="num">{{baseData.expiring_company_num}}</div>
                        </div>
                    </div> -->
                </div>
            </el-col>
            <el-col :span="5">
                <div class="in">
                     <div class="userInfo">
                        <el-avatar size="large" shape="square" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
                        <div>
                            <div class="name">{{userInfo.realname}}</div>
                            <div style="font-size:12px">{{userInfo.role_name}}</div>
                        </div>
                    </div>
				</div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="in2 base">
					<!-- <div class="menu">
                        <div class="title">
                            <div class="left">数据趋势</div>
                            <div class="right">
                                <el-radio-group v-model="dateType" @change="cdateType" size="small">
                                    <el-radio-button label="0">今日</el-radio-button>
                                    <el-radio-button label="1">本周</el-radio-button>
                                    <el-radio-button label="2">本月</el-radio-button>
                                    <el-radio-button label="3"><span style="height:10px" class="el-icon-refresh"> </span></el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                    </div> -->
					<div id="myChart" :style="{width: '100%', height: '85%'}"></div>
				</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "Index",
    data() {
		return {
			myChart:'',
            histogramData:'',
            chartData:[],
            userInfo:JSON.parse(localStorage.getItem('user')),
            dateType:'0',
            baseData:'',
		}
	},
	created() {
        // this.getBaseData()
    },
	mounted() {
        // this.getHistogramData()
        // 当屏幕改变，图表重新动态改变并渲染
        // window.onresize = () => {
        //     this.myChart.resize();
        // };
	},
    methods: {
        // 获取基本信息
        getBaseData() {
            this.$axios.post(this.API.GetBaseData).then(res => {
                this.baseData = res.data.data.stats;
            });
        },
        // 获取图表数据
        getHistogramData() {
            this.$axios.post(this.API.GetHistogramData,{dateType:this.dateType}).then(res => {
                this.chartData = res.data.data.stats;
                this.drawLine();
            });
        },
		// 切换dateType
        cdateType(e) {
            if (e == 3) this.dateType = 0
            this.getHistogramData()
        },
		// 画图
        drawLine() {
            // 初始化echarts实例
            this.myChart = this.$echarts.init(
                document.getElementById("myChart")
            );
            // 绘制图表
            this.myChart.setOption({
                tooltip: {show: true,trigger: 'axis'},
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Object.keys(this.chartData),
                    nameTextStyle: {
                        //坐标轴名称的文字样式
                        fontSize: 16,
                    },
                },
                yAxis: {
                    name:'新增企业数',
                    type: 'value',
                    // minInterval : 1,
                    // boundaryGap : [ 0, 0.1]
                    nameTextStyle: {
                        fontSize: 16,
                        padding: [0, 0, 10, 0],
                    },
                },
                series: [
                    {
                        name: "新增企业数",
                        type: "line",
                        smooth: true,
                        color:'#088aee',
                        data: Object.values(this.chartData)
                    },
                ]
            });

        },
    }
};
</script>

<style scoped lang="scss">
div {
    box-sizing: border-box;
}
.el-row {
    margin-bottom: 20px;
}
.el-col > div {
    border: 1px solid #6db6ff;
    border-radius: 10px;
    padding: 20px;
}
.base {
    .title {
        font-weight: 700;
        font-size: 22px;
    }
    .cot {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .v1 {
            flex: 1;
            text-align: center;
            .txt {
                margin-bottom: 8px;
            }
            .num {
                font-size: 35px;
                font-weight: bold;
                color: #0079de;
            }
        }
    }
}
.in {
    height: 180px;
    .userInfo {
        display: flex;
        .el-avatar {
            margin-right: 18px;
        }
        .name {
            font-weight: 600;
        }
    }
}
.in2 {
    height: 520px;
	.menu {
        .title {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 22px;
        }
    }
    #myChart {
        margin-top: 20px;
    }
}
.in3 {
    height: 204px;
}
</style>